<template>
    <div>
        <div class="top-bar bg-black py-2 px-3 d-flex ai-center">
            <img src="../assets/img/logo.png" height="30">
            <div class="pl-3 flex-1">
                <div class="text-white">王者荣耀</div>
                <div class="text-grey-1 fs-sm mt-1">团队成就更多</div>
            </div>
            <button type="button" class="btn bg-primary">立即下载</button>
        </div>
        <div class="bg-primary pt-3 pb-2">
            <div class="nav pb-1 nav-inverse jc-around">
                <div :class="['nav-item', currentIndex === 1 ? 'active' : '']" @click="linkActive(1)">
                    <router-link class="nav-link" tag="div" to="/">首页</router-link>
                </div>
                <div :class="['nav-item', currentIndex === 2 ? 'active' : '']" @click="linkActive(2)">
                    <router-link class="nav-link" tag="div" to="/strategy">攻略中心</router-link>
                </div>
                <div :class="['nav-item', currentIndex === 3 ? 'active' : '']" @click="linkActive(3)">
                    <router-link class="nav-link" tag="div" to="/match">赛事中心</router-link>
                </div>
            </div>
        </div>
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data() {
            return {
                currentIndex: 1
            }
        },
        methods: {
            linkActive(index) {
                this.currentIndex = index;
            }
        }
    }
</script>

<style scoped lang="scss">
    .top-bar {
        position: sticky;
        top: 0;
        z-index: 999;
    }
</style>
